<template>
    <el-row :gutter="20">
        <el-col :span="22">
            <el-card style="height:84vh" v-if="!infoValue">
                <template #header>
                    <el-select v-model="type" @change="casingDraw.casingBlack()">
                        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </template>
                <casings-form v-if="type == 'casings'" />
                <open-hole-form v-if="type == 'openHole'" />
                <liners-form v-if="type == 'liners'" />
                <tubings-form v-if="type == 'tubings'" />
                <drill-pipe-form v-if="type == 'drillPipe'" />
                <reservior-form v-if="type == 'reservior'" />
            </el-card>
            <add-info v-if="infoValue"></add-info>
        </el-col>
        <el-col :span="2" style="margin-top:5%">
            <el-row><el-button style="width: 100%; width: 100%" title="添加套管" @click="addCasing()"><img
                        src="@/assets/hole/套管.png" style="width: 30px; height: 30px" /></el-button></el-row>
            <el-row> <el-button style="width: 100%; width: 100%" title="添加裸眼井"><img src="@/assets/hole/裸眼井.png"
                        style="width: 30px; height: 30px" /></el-button></el-row>
            <el-row> <el-button style="width: 100%; width: 100%" title="添加特殊套管"><img src="@/assets/hole/特殊套管.png"
                        style="width: 30px; height: 30px" /></el-button></el-row>
            <el-row> <el-button style="width: 100%; width: 100%" title="添加油管"><img src="@/assets/hole/油管.png"
                        style="width: 30px; height: 30px" /></el-button></el-row>
            <el-row> <el-button style="width: 100%; width: 100%" title="添加钻杆"><img src="@/assets/hole/钻杆.png"
                        style="width: 30px; height: 30px" /></el-button>
            </el-row>
            <el-row> <el-button style="width: 100%; width: 100%" title="添加信息" @click="change"><img
                        src="@/assets/hole/information.png" style="width: 30px; height: 30px" /></el-button>
            </el-row>
        </el-col></el-row>
</template>
  
<script setup>
import { ref } from 'vue'
import casingsForm from '@/components/Project/HoleStructure/Type/casings'
import openHoleForm from '@/components/Project/HoleStructure/Type/openHole'
import linersForm from '@/components/Project/HoleStructure/Type/liners'
import tubingsForm from '@/components/Project/HoleStructure/Type/tubings'
import drillPipeForm from '@/components/Project/HoleStructure/Type/drillPipe'
import reserviorForm from '@/components/Project/HoleStructure/Type/reservior'
import casingStore from '@/store/modules/casingDraw'
import AddInfo from './Type/addInfo.vue'
const infoValue = ref(false)
const casingDraw = casingStore();
const type = ref("casings")
const options = [
    {
        options: [
            { value: "casings", label: "普通套管" },
            { value: "openHole", label: "裸眼井" },
            { value: "tubings", label: "油管" },
            // { value: "liners", label: "特殊套管" },
            // { value: "drillPipe", label: "钻杆" },
        ]
    }, {
        options: [{ value: "reservior", label: "储层" }]
    }]
const casingData = ref(
    { outerDiameter: 400, bottom: 1000, top: 0 })
function addCasing() {
    casingDraw.addCasingData(casingData.value.outerDiameter, casingData.value.bottom, casingData.value.top);
    casingDraw.saveInitCasings(casingData.value.outerDiameter, casingData.value.top, casingData.value.bottom);
    casingData.value.outerDiameter = casingData.value.outerDiameter - 20
    casingData.value.bottom = casingData.value.bottom - 50
}
function change() {
    infoValue.value = !infoValue.value
}



</script>
<style scoped>
.buttonClass {
    align-items: center;
    /* 垂直居中 */
    /* 水平居中 */
    height: 70vh;
    /* 设置容器高度，可以根据实际需求调整 */
}

.el-row {
    margin-bottom: 25px;
}
</style>